<template>
  <header>
    <div class="header-content">
      <!-- Logo 放在左上角 -->
      <div class="logo-container">
        <span class="logo">中国风音乐平台</span>
      </div>
      <!-- 用户名和退出登录链接放在右上角 -->
      <div class="user-info">
        <span class="user_name">{{ user_name }}</span>
        <button class="notification-button" @click="toggleNotifications">
          通知
          <span v-if="unreadNotificationsCount" class="notification-count">{{ unreadNotificationsCount }}</span>
        </button>
        <button class="logout-button" @click="logout">退出登录</button>
      </div>
      <!-- 导航栏放在下一行中间 -->
      <nav class="nav-links">
        <router-link to="/FirstPage" class="nav-link">首页</router-link> |
        <router-link to="/Culture" class="nav-link">文化雅集</router-link> |
        <router-link to="/Study" class="nav-link">风华乐章</router-link> |
        <router-link to="/MusicLibrary" class="nav-link">天籁藏馆</router-link> |
        <router-link to="/Note" class="nav-link">墨香笔记</router-link> |
        <router-link to="/MyHome" class="nav-link">心韵空间</router-link>|
        <router-link to="/MusicAssistant" class="nav-link">音乐助手</router-link>
      </nav>
      <!-- 系统通知下拉框 -->
      <div v-if="showNotificationsDropdown" class="notifications-dropdown">
  <div class="notifications-list">
    <div v-for="notification in notifications" :key="notification.notification_id"
         class="notification-item" @click="showNotificationDetail(notification)">
      {{ notification.content }}
      <!-- 显示未读通知的小红点 -->
      <span v-if="!notification.is_read" class="notification-dot"></span>
    </div>
  </div>
</div>
      <!-- 系统通知弹框 -->
      <el-dialog
        title="系统通知详情"
        :visible.sync="isNotificationDialogVisible"
        width="30%"
        @close="isNotificationDialogVisible = false"
      >
        <div v-if="currentNotification" class="dialog-notifications-detail">
          <p><strong>内容：</strong>{{ currentNotification.content }}</p>
          <!-- 可以添加更多通知详情如时间戳等 -->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isNotificationDialogVisible = false">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 从 localStorage 获取用户名和user_id
const user_name = ref(localStorage.getItem('user_name') || '用户');
const user_id = ref(parseInt(localStorage.getItem('user_id')) || 0);

// 获取路由实例
const router = useRouter();

// 系统通知相关状态
const notifications = ref([]);
const unreadNotificationsCount = ref(0);
const showNotificationsDropdown = ref(false);
const isNotificationDialogVisible = ref(false);
const currentNotification = ref(null); // 存储当前点击的通知

const fetchNotifications = async () => {
  try {
    const response = await axios.get(`http://localhost:8080/notifications/users/${user_id.value}`);
    console.log(response.data); // 查看返回的数据结构
    notifications.value = response.data;
    unreadNotificationsCount.value = notifications.value.filter(n => !n.is_read).length;
  } catch (error) {
    console.error('Failed to fetch notifications:', error);
  }
};

const toggleNotifications = () => {
  showNotificationsDropdown.value = !showNotificationsDropdown.value;
};

const showNotificationDetail = async (notification) => {
  console.log(notification);
  if (!notification || notification.notification_id === undefined) {
    console.error('Notification ID is undefined');
    alert('通知数据不完整');
    return;
  }
  currentNotification.value = notification;
  isNotificationDialogVisible.value = true;

  try {
    const response = await axios.post(`http://localhost:8080/notifications/users/${user_id.value}/notifications/${notification.notification_id}/read`);
    if (response.data === 'Notification marked as read') {
      notification.is_read = true; // 更新本地通知状态
      unreadNotificationsCount.value -= 1; // 减少未读计数
    }
  } catch (error) {
    console.error('Failed to mark notification as read:', error);
    alert('无法标记通知为已读，请稍后再试');
  }
};

const logout = () => {
  console.log('退出登录');
  localStorage.removeItem('user_name');
  localStorage.removeItem('user_id');
  user_name.value = '用户';
  user_id.value = 0;
  router.push('/');
};

onMounted(() => {
  fetchNotifications();
});
</script>

<style scoped>
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* 确保 logo 在顶部居中 */
  padding: 20px; /* 调整 padding 以垂直居中 */
  background: linear-gradient(to right, #f9f4e8, #e8dfca); /* 使用与 sidebar 相同的渐变背景 */
  color: #4b3f33; /* 主文字颜色与 sidebar 一致 */
  height: auto; /* 调整高度以适应新布局 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影与 sidebar 一致 */
  border-bottom: 1px solid #d6c8b0; /* 与 sidebar 边框颜色一致 */
  font-family: 'KaiTi', 'SimSun', serif; /* 保持中国风的字体 */
  position: relative; /* 为用户信息定位 */
}

.logo-container {
  position: absolute;
  left: 20px; /* 左上角定位 */
  top: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #4b3f33;
  letter-spacing: 3px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* 字体阴影效果 */
}

.user-info {
  position: absolute;
  right: 20px; /* 右上角定位 */
  top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.username {
  font-size: 16px;
  color: #4b3f33;
}

.notification-dot {
  display: inline-block;
  width: 8px; /* 小红点的宽度 */
  height: 8px; /* 小红点的高度 */
  background-color: red; /* 小红点的背景颜色 */
  border-radius: 50%; /* 使小红点呈圆形 */
  margin-left: 5px; /* 与文本的间距 */
}

.logout-button {
  color: #4b3f33;
  background: transparent;
  border: none;
  font-size: 16px;
  font-family: 'KaiTi', 'SimSun', serif;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #f9f4e8;
}

.nav-links {
  display: flex;
  justify-content: center; /* 使导航栏居中显示 */
  gap: 20px;
  width: 100%; /* 使导航栏宽度占满容器 */
  margin-top: 60px; /* 为导航栏留出空间 */
}

.nav-link {
  color: #4b3f33;
  text-decoration: none;
  padding: 5px 10px;
  font-size: 20px;
  font-family: 'KaiTi', 'SimSun', serif;
}

/* 活动链接的样式 */
.nav-link.router-link-active {
  background-color: #d8b689; /* 设置活动链接的背景色 */
  color: #333; /* 设置活动链接的文字颜色 */
}


.nav-link:hover {
  background-color: #f0e9c2; /* 与 sidebar 悬停背景一致 */
  color: #333;
}

/* 系统通知按钮样式 */
.notification-button {
  color: #4b3f33;
  background: transparent;
  border: none;
  font-size: 16px;
  font-family: 'KaiTi', 'SimSun', serif;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
  position: relative;
}

.notification-count {
  display: inline-block;
  padding: 0 5px;
  background-color: #F2BE45;
  color: white;
  border-radius: 10px;
  font-size: 12px;
  position: absolute;
  top: -5px;
  right: -5px;
}

/* 系统通知下拉框样式 */
.notifications-dropdown {
  position: absolute;
  right: 20px;
  top: 60px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 10;
}

.notifications-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
}

.notification-item {
  padding: 10px;
  border-bottom: 1px solid #e8dfca;
  cursor: pointer;
}

/* 系统通知弹框样式 */
.dialog-notifications-list {
max-height: 300px;
overflow-y: auto;
padding: 20px;
}

.dialog-notification-item {
padding: 10px;
border-bottom: 1px solid #e8dfca;
}

.dialog-footer {
text-align: right;
}
</style>

